body{
    background-color: black;
}
.box{
    width: 150px;
    height: 200px;
    border: 5px solid white;

    /* 固定定位 */
    position: fixed;
    /* left: 0;
    top: 0;
    right: 0;
    bottom: 0; */
    /* 上面代码简写 */
    inset: 0;

    /* 神来之笔 窗口大小变了，也会居中 */
    margin: auto;
    /* 变换盒子的样式为维持3D空间 */
    transform-style: preserve-3d;
    /* rotate 旋转 */
    transform:rotateX(-10deg) rotateY(10deg);
    
}
.box>img{
    width: 100%;
    height: 100%;
    /* 绝对定位 */
    position: absolute;
    /* 盒子阴影: 水平偏移 垂直偏移 模糊度 扩张度 阴影颜色 */
    box-shadow: 0 0 15px 5px rgba(163, 220, 242, 0.8);
    /* 倒影  */
    -webkit-box-reflect: below 10px linear-gradient(to bottom,transparent,rgba(0,0,0,.18));
    /* linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 
        线性渐变 到底部 透明的 rgba(0,0,0,.18) 透明度0.18
    */
}
.box>img:nth-child(1){
    /* translate 位移 移动位置*/
    transform: rotateY(30deg) translateZ(600px);
}
.box>img:nth-child(2){
    transform: rotateY(60deg) translateZ(600px);
}
.box>img:nth-child(3){
    transform: rotateY(90deg) translateZ(600px);
}
.box>img:nth-child(4){
    transform: rotateY(120deg) translateZ(600px);
}
.box>img:nth-child(5){
    transform: rotateY(150deg) translateZ(600px);
}
.box>img:nth-child(6){
    transform: rotateY(180deg) translateZ(600px);
}
.box>img:nth-child(7){
    transform: rotateY(210deg) translateZ(600px);
}
.box>img:nth-child(8){
    transform: rotateY(240deg) translateZ(600px);
}
.box>img:nth-child(9){
    transform: rotateY(270deg) translateZ(600px);
}
.box>img:nth-child(10){
    transform: rotateY(300deg) translateZ(600px);
}
.box>img:nth-child(11){
    transform: rotateY(330deg) translateZ(600px);
}
.box>img:nth-child(12){
    transform: rotateY(360deg) translateZ(600px);
}